<template>
	<div class="address">
		<div class="address-add">
			<div class="add-btn">
				<button @click="go('./addressAdd')"  type="default"><i class="hd-icon">&#xe794;</i>添加收货地址</button>
			</div>
		</div>
		<radio-group @change="radioChange">
		<view class="address-list">
			<view class="address-item" v-for="(item,index) in addressList">
				<div class="address-info">
					<h3>{{item.name}} {{item.mobile}}</h3>
					<p>{{item.province}} {{item.city}} {{item.qu}} {{item.address}}</p>
				</div>
				<div class="address-btns">
					<label><radio :checked="item.is_default==1||addressList.length==1" :value="item.id"/>设为默认</label>
					<div>
						<p @click="go('./addressAdd?id='+item.id)"><i class="hd-icon">&#xe610;</i>修改</p>
						<p @click="deletes(item.id)"><i class="hd-icon">&#xe618;</i>删除</p>
					</div>
				</div>
			</view>
		</view>
		</radio-group>
		<p class="copy-text">渝ICP备19010173号-41</p>
		<fab :topBtn="isTopBtn"></fab>
	</div>
</template>

<script>
	import fab from '@/components/fab'
    import { userAddress,deleteUserAddress,setDefaultAddress } from '@/api/address';
    import { getAuth } from '@/api/user';
	export default{
		data(){
			return{
				isTopBtn:false,
                addressList:[]
			}
		},
        computed:{
        	userInfo(){
        		return getAuth();
        	}
        },
		components:{
			fab
		},
        onShow(){
            this.getData();
        },
		onPageScroll(e){
			if(e.scrollTop>=400){
				this.isTopBtn=true
			}
			if(e.scrollTop<=100){
				this.isTopBtn=false
			}
		},
		methods:{
            getData(){
              userAddress(this.userInfo.username).then((res)=>{
                  if(res.data.status==1){
                      this.addressList = res.data.datas;
					  if(this.addressList.length==1){
						  let e = {detail:{'value':''}}
						   e['detail']['value'] = this.addressList[0].id;
						  this.radioChange(e)
					  }
                  }else{
					  this.addressList=[];
				  }
              })  
            },
			radioChange(e){
                setDefaultAddress(this.userInfo.username,e.detail.value).then((res)=>{
                    if(res.data.status==1){
                        uni.showToast({
                            'title':'设置成功'
                        })
                    }
                })
			},
            go(url){
                uni.navigateTo({
                    url
                })
            },
            deletes(id){
                uni.showModal({
                	title: '确认提醒',
                	content: '您确定要移除该条收货地址吗？',
                	success:(e)=>{
                		if (e.confirm) {
                			deleteUserAddress(this.userInfo.username,id).then((res)=>{
                			    if(res.data.status==1){
                                    this.getData();
                                }
                			})
                		}
                	}
                });
            }
		}
	}
</script>

<style lang="scss">
	.address-add{
		background: #fff;
		.add-btn{
			width:690rpx;
			margin:0 auto;
			padding:30rpx 0;
			button{
				color:#fd8197;
				font-size:28rpx;
				padding:10rpx 0;
                background: none;
				&:after{
					border:1px solid #fd8197;
					border-radius: 0;
				}
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
	.address-list{
		.address-item{
			background: #fff;
			margin-top:30rpx;
			padding-bottom:30rpx;
			.address-info{
				width:690rpx;
				margin:0 auto;
				padding:30rpx 0 26rpx 0;
				border-bottom:1px solid #eee;
				h3{
					color:#333;
					font-size:28rpx;
				}
				p{
					color:#858585;
					font-size:28rpx;
					margin-top:8rpx;
				}
			}
			.address-btns{
				width:690rpx;
				margin:0 auto;
				display: flex;
				justify-content: space-between;
				margin-top:20rpx;
				label{
					display: flex;
					align-items: center;
					font-size:28rpx;
					color:#858585;
				}
				div{
					display: flex;
					justify-content: flex-start;
					p{
						display: flex;
						justify-content: flex-start;
						align-items: center;
						color:#666;
						font-size:28rpx;
						margin-left:16rpx;
						i{
							font-size:36rpx;
							margin-right:4rpx;
						}
					}
				}
			}
		}
	}
	.copy-text{
		color:#666;
		font-size:24rpx;
		text-align: center;
		margin-top:60rpx;
	}
</style>
